import React, { ReactNode } from "react";
import "./index.scss";

interface IVEchartsWrapperProps {
    title: ReactNode;
    echartsNode: {
        component: React.ComponentType;
        wrapperComp?: React.ComponentType;
    }[];
}

class VEchartsWrapper extends React.Component<IVEchartsWrapperProps> {
    render(){
        const { title, echartsNode } = this.props;
        return (<div className="v-echarts-wrapper">
            <div className="v-echarts-wrapper-header">
                <h3>{title}</h3>
            </div>
            <div className="v-echarts-wrapper-main">
                {
                    echartsNode.map(config => {
                        const Charts = config.component;
                        const Wrapper = config.wrapperComp;
                        return Wrapper ? <Wrapper><Charts /></Wrapper> : <Charts />
                    })
                }
            </div>
        </div>)
    }
}

export default VEchartsWrapper;